<template>
  <div class="cms-category">
    <el-row>
      <el-col :span="4" class="border">
        <el-tree class="tree" :data="data" accordion @node-click="handleNodeClick">
        </el-tree>
      </el-col>
      <el-col :span="20" class="rightcontent">
        <el-form :inline="true" :model="dataForm">
          <!--<el-form-item>
        <el-input v-model="dataForm.paramKey" placeholder="参数名" clearable></el-input>
      </el-form-item>-->
          <el-form-item>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                当前栏目:
                <a> {{navparent}}</a>
              </el-breadcrumb-item>
              <el-breadcrumb-item>
                <a>{{navchild}}</a>
              </el-breadcrumb-item>
            </el-breadcrumb>
            <!--<el-button @click="getDataList()">查询</el-button>-->
            <el-button class="navbutton" type="primary">新增</el-button>
          </el-form-item>
        </el-form>
        <el-table :row-class-name="tableRowClassName" :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
          <el-table-column type="selection" header-align="center" align="center" width="50">
          </el-table-column>
          <el-table-column prop="belongsite" header-align="center" align="center" label="所属站点">
          </el-table-column>
          <el-table-column prop="categoryname" header-align="center" align="center" label="栏目名称">
          </el-table-column>
          <el-table-column prop="sort" header-align="center" align="center" label="排序号">
          </el-table-column>
          <el-table-column prop="state" header-align="center" align="center" label="状态">
          </el-table-column>
          <el-table-column fixed="right" header-align="center" align="center" width="360" label="操作">
            <template slot-scope="scope">
              <el-button size="small">修改</el-button>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<style type="text/css">
  .cms-category {
    .border {
      border: 1px solid #E0E0E0;
    }
    .el-table .odd-row td {
      background-color: #FBFBFB;
    }
    .el-table .even-row td {
      background-color: white;
    }
    .navbutton {
      margin-top: 12px;
    }
    .rightcontent {
      padding-left: 15px;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        dataForm: {
          paramKey: ''
        },
        dataList: [{
          belongsite: "www.baidu.com",
          categoryname: "栏目名称",
          sort: "1",
          state: "正常"
        }],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false,
        navparent: "一级 1",
        navchild: "二级 1-1",
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1'
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1'
          }, {
            label: '二级 2-2'
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1'
          }, {
            label: '二级 3-2'
          }]
        }]
      }
    },
    components: {},
    activated() {
      //  this.getDataList()
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if(rowIndex % 2 != 0) {
          return 'odd-row';
        } else if(rowIndex % 2 == 0) {
          return 'even-row';
        }
        return '';
      },
      handleNodeClick(data) {
        console.log(data);
        if(data.children) {
          this.navparent = data.label;
          this.navchild = ""
        } else {
          this.navchild = data.label;
        }
      }
    }
  }
</script>
